<template>
  <div class="bingan">
    <div class="se">
      <div>
        <label for="">选择搜索条件：</label>
        <el-select v-model="myVal" placeholder="请选择查询条件" class="mySelect">
          <el-option label="病案号" value="fgNum"></el-option>
          <el-option label="入院时间" value="fgInTime"></el-option>
          <el-option label="入院情况" value="fgInStatus"></el-option>
        </el-select>
      </div>
      <div class="mySeK">
        <el-input v-if="myVal === 'fgNum'" v-model="myInputVal" class="myInput"></el-input>
        <!-- <el-date-picker class="myDate" v-if="myVal === 'fgInTime'" v-model="myInputVal" type="datetime" placeholder="选择日期时间"></el-date-picker> -->
        <el-col :span="11" v-if="myVal === 'fgInTime'">
          <el-date-picker type="date" placeholder="选择日期" v-model="myInputVal" style="width: 150%;"></el-date-picker>
        </el-col>
        <!-- <el-input v-if="myVal === 'fgInStatus'" v-model="myInputVal" class="myInput"></el-input> -->
        <el-select style="margin-left:20px" v-else-if="myVal === 'fgInStatus'" v-model="myInputVal" placeholder="请选择入院情况" class="mySelect">
          <el-option label="危" value="1"></el-option>
          <el-option label="急" value="2"></el-option>
          <el-option label="一般" value="3"></el-option>
        </el-select>
      </div>
      <el-button type="primary" round class="mySeBt" @click="selectOne">搜索</el-button>
      <el-button type="primary" round class="mySeBt" @click="chongZhi">重置</el-button>
    </div>

    <el-table :data="nowData" style="width: 100%">
      <el-table-column align="center" label="医疗卡号">
        <template slot-scope="scope">
          <span>{{ scope.row.personNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          <i class="el-icon-user"></i>
          <span>{{ scope.row.fgName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="性别">
        <template slot-scope="scope">
          <span>{{ scope.row.fgSex }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="当前病案号">
        <template slot-scope="scope">
          <span>{{ scope.row.fgNum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="身份证号" width="160rpx">
        <template slot-scope="scope">
          <span>{{ scope.row.fgIdNum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="缴费方式">
        <template slot-scope="scope">
          <span v-if="scope.row.fgPayway == 1">统筹</span>
          <span v-else-if="scope.row.fgPayway == 2">公费</span>
          <span v-else-if="scope.row.fgPayway == 3">劳保</span>
          <span v-else-if="scope.row.fgPayway == 4">医疗保险</span>
          <span v-else-if="scope.row.fgPayway == 5">自费及其他</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="入院时间">
        <template slot-scope="scope">
          <span>{{ scope.row.fgInTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="第几次入院">
        <template slot-scope="scope">
          <span>{{ scope.row.fgTimes }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="入院情况">
        <template slot-scope="scope">
          <span v-if="scope.row.fgInStatus == 1">危</span>
          <span v-if="scope.row.fgInStatus == 2">急</span>
          <span v-if="scope.row.fgInStatus == 3">一般</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="170px">
        <template slot-scope="scope">
          <el-button size="mini" @click="updataMyBa(scope.row, 'BinganXq')">查看详情</el-button>
          <el-button size="mini" @click="updataMyBa(scope.row, 'UpdataBingAn')">修改</el-button>
          <!-- <el-button size="mini" @click="updataBa(scope.row)">修改</el-button> -->
          <!-- <el-button size="mini" type="danger" @click="deleteuser(scope.row)">Delete</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination layout="prev, pager, next" :page-count="maxPage" :current-page="this.$store.state.MedicalRecords.nowPage" @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  data() {
    return {
      search: '',
      myVal: '',
      myInputVal: '',
      //弹框显示信息
    };
  },
  computed: {
    ...mapGetters({ maxPage: 'MedicalRecords/maxPage', nowData: 'MedicalRecords/nowData' }),
  },
  components: {
    // ADD,
  },
  created() {
    this.selectCeShi();
  },
  watch: {
    myVal: function() {
      this.myInputVal = '';
    },
  },
  methods: {
    ...mapActions(['MedicalRecords/selectBrData', 'MedicalRecords/selectMyNowBa', 'tongyong']),
    selectCeShi() {
      this['MedicalRecords/selectBrData']({
        name: 'SELECT_BR',
        data: {
          doctorNo: 'Z00001',
        },
      });
    },
    updataMyBa(data, path) {
      // this.selectMyAllBa(data).then(resp1 => {
      this['MedicalRecords/selectMyNowBa']({
        name: 'SELECT_MYNOWBA',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.$store.state.MedicalRecords.bingAnXqData.personNo = data.personNo;
          let newDate = new Date();
          let year = newDate.getFullYear();
          this.$store.state.MedicalRecords.bingAnXqData.fgAge = year - this.$store.state.MedicalRecords.bingAnXqData.fgBirthday.slice(0, 4);
          this.$router.push({ path: path });
        }
      });
      // });
    },
    // selectMyAllBa(data) {
    //   return this['tongyong']({
    //     name: 'SELECT_MYALLBA',
    //     data: data,
    //   }).then(resp => {
    //     if (resp.data.code == 200) {
    //       let fgTimeList = [];
    //       let MaxFgTime = 0;
    //       for (const elem of resp.data.data) {
    //         fgTimeList.push(elem.fgTimes);
    //       }
    //       MaxFgTime = Math.max(...fgTimeList);
    //       return { fgTimes: MaxFgTime, fgIdNum: data.fgIdNum };
    //     }
    //   });
    // },
    handleCurrentChange(val) {
      this.$store.state.MedicalRecords.nowPage = val;
    },
    selectOne() {
      this.$store.state.MedicalRecords.nowPage = 1;
      if (this.myVal == 'fgNum') {
        this['MedicalRecords/selectBrData']({
          name: 'SELECT_BABYID',
          data: {
            doctorNo: 'Z00001',
            fgNum: this.myInputVal,
          },
        });
      }
      if (this.myVal == 'fgInTime') {
        this['MedicalRecords/selectBrData']({
          name: 'SELECT_BABYTIME',
          data: {
            doctorNo: 'Z00001',
            fgInTime: this.changetime(this.myInputVal),
          },
        });
      }
      if (this.myVal == 'fgInStatus') {
        this['MedicalRecords/selectBrData']({
          name: 'SELECT_BABYQK',
          data: {
            doctorNo: 'Z00001',
            fgInStatus: this.myInputVal,
          },
        });
      }
    },
    chongZhi() {
      this.selectCeShi();
      this.myVal = '';
      this.myInputVal = '';
      this.$store.state.MedicalRecords.nowPage = 1;
    },
    padDate(value) {
      return value < 10 ? '0' + value : value;
    },
    changetime(value) {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = this.padDate(date.getMonth() + 1);
      let d = this.padDate(date.getDate());
      let xiaoshi = this.padDate(date.getHours());
      let fenzhong = this.padDate(date.getMinutes());
      let miao = this.padDate(date.getSeconds());
      return `${year}-${month}-${d}`;
    },
  },
};
</script>
<style lang="less" scoped>
.se {
  display: flex;
  .mySeK {
    width: 20%;
    margin-left: 20px;
  }
  .mySelect {
    margin-bottom: 20px;
  }

  /deep/.myInput {
    width: 70%;
    margin-left: 20px;
  }
  .myDate {
    width: 100%;
    margin-left: 20px;
    /deep/.el-input__icon {
      height: 0;
    }
  }
  .mySeBt {
    height: 40px;
    margin-left: 40px;
  }
}
</style>
